<template>
  <el-row>
    <el-col>
      <el-card>
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item>
            <el-button type="success" style="margin-bottom: 15px;" @click="addDialog = true">添加其他管理员</el-button>
          </el-form-item>
        </el-form>
        <el-scrollbar>
          <el-table :data="adminInfo" border height="700" style="width: 100%">
            <el-table-column prop="id" label="ID" width="70px"/>
            <el-table-column prop="username" label="用户名" />
            <el-table-column prop="phone" label="电话"/>
            <el-table-column prop="email" label="邮箱"/>
            <el-table-column prop="realname" label="真实姓名"/>
            <el-table-column prop="createTime" label="创建时间"/>
            <el-table-column prop="status" label="账户状态" width="100px">
              <template #default="scope">
                <el-switch
                    :active-value="1" :inactive-value="0" size="large"
                    active-text="正常" inactive-text="禁用" inline-prompt
                    v-model="scope.row.status" class="ml-2"
                    style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                    @change="updateStatus(scope.row.id, scope.row.status)"
                />
              </template>
            </el-table-column>
            <el-table-column label="操作" width="300px">
              <template #default="scope">
                <el-button size="small" type="warning" @click="resetPassword(scope.row.id)">重置密码</el-button>
                <el-button size="small" type="primary" @click="showUpdateDialog(scope.row.id)" >修改</el-button>
                <el-popconfirm title="你确定删除该管理员吗?" confirm-button-text="确认"
                               @confirm="deleteById(scope.row.id)" cancel-button-text="取消" width="200px">
                  <template #reference>
                    <el-button size="small" type="danger">删除</el-button>
                  </template>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </el-scrollbar>
      </el-card>
    </el-col>
  </el-row>

  <!-- 添加对话框开始 -->
  <el-dialog v-model="addDialog" title="添加管理员" width="500">
    <el-form>
      <el-form-item label="名称" label-width="20%">
        <el-input v-model="addForm.username" placeholder="请输入用户名" autocomplete="off" style="width: 300px;"/>
      </el-form-item>
      <el-form-item label="电话" label-width="20%">
        <el-input v-model="addForm.phone" placeholder="请输入电话" autocomplete="off" style="width: 300px;"/>
      </el-form-item>
      <el-form-item label="邮箱" label-width="20%">
        <el-input v-model="addForm.email" placeholder="请输入邮箱" autocomplete="off" style="width: 300px;"/>
      </el-form-item>
      <el-form-item label="真实姓名" label-width="20%">
        <el-input v-model="addForm.realname" placeholder="请输入真实姓名" autocomplete="off" style="width: 300px;"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="addDialog = false">取消</el-button>
        <el-button type="primary" @click="insert">提交</el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 添加对话框结束 -->

  <!-- 修改对话框开始 -->
  <el-dialog v-model="updateDialog" title="修改信息" width="500">
    <el-form>
      <el-form-item label="名称" label-width="20%">
        <el-input disabled v-model="updateForm.username" placeholder="请输入用户名" autocomplete="off" style="width: 300px;"/>
      </el-form-item>
      <el-form-item label="电话" label-width="20%">
        <el-input v-model="updateForm.phone" placeholder="请输入电话" autocomplete="off" style="width: 300px;"/>
      </el-form-item>
      <el-form-item label="邮箱" label-width="20%">
        <el-input v-model="updateForm.email" placeholder="请输入邮箱" autocomplete="off" style="width: 300px;"/>
      </el-form-item>
      <el-form-item label="真实姓名" label-width="20%">
        <el-input v-model="updateForm.realname" placeholder="请输入真实姓名" autocomplete="off" style="width: 300px;"/>
      </el-form-item>
      <el-form-item label="是否禁用" label-width="20%">
        <el-radio-group v-model="updateForm.status">
          <el-radio :value="0">禁用</el-radio>
          <el-radio :value="1">正常</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="updateDialog = false">取消</el-button>
        <el-button type="primary" @click="update">提交</el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 修改对话框结束 -->

</template>

<script setup>

import {ref} from "vue";
import adminApi from "@/api/adminApi.js";
import {Plus} from "@element-plus/icons-vue";
import {ElMessage} from "element-plus";

const adminInfo = ref();
const addDialog = ref(false);
const updateDialog = ref(false);
const addForm = ref({
  username: null,
  phone: null,
  email: null,
  realname: null
});
const updateForm = ref({
  username: null,
  phone: null,
  email: null,
  realname: null,
  status: null
});
//获取所有管理员信息
function selectAll() {
  adminApi.selectAll().then(resp => {
    adminInfo.value = resp.data;
  });
}
selectAll();
//添加管理员
function insert() {
  adminApi.insert(addForm.value)
      .then(resp => {
        if (resp.code == 10000) {
          ElMessage.success(resp.msg);
          addDialog.value = false;
          addForm.value = {
            username: null,
            password: null,
            phone: null,
            email: null,
            realname: null
          };
          selectAll();
        } else {
          ElMessage.error(resp.msg);
        }
      })
}
//显示修改对话框
function showUpdateDialog(id) {
  adminApi.selectById(id)
      .then(resp => {
        updateForm.value = resp.data;
        updateDialog.value = true;
      })
}
//定义方法修改管理员信息
function update() {
  adminApi.update(updateForm.value)
      .then(resp => {
        if (resp.code == 10000) {
          ElMessage.success(resp.msg);
          updateDialog.value = false;
          updateForm.value = {
            username: null,
            phone: null,
            email: null,
            realname: null
          };
          selectAll();
        } else {
          ElMessage.error(resp.msg);
        }
      })
}
//定义方法根据id删除
function deleteById(id) {
  adminApi.delete(id)
      .then(resp => {
        if (resp.code == 10000) {
          ElMessage.success(resp.msg);
          selectAll();
        } else {
          ElMessage.error(resp.msg);
        }
      });
}
//定义方法重置密码
function resetPassword(id) {
  adminApi.resetPassword(id)
      .then(resp => {
        if (resp.code == 10000) {
          ElMessage.success(resp.msg);
        } else {
          ElMessage.error(resp.msg);
        }
      })
}
//定义方法修改状态
function updateStatus(id, status) {
  const updateStatusForm = {
    id,
    status
  }
  adminApi.update(updateStatusForm)
      .then(resp => {
        if (resp.code == 10000) {
          ElMessage.success(resp.msg);
          selectAll();
        } else {
          ElMessage.error(resp.msg);
        }
      })
}

</script>

<style scoped>

</style>